<template>
	<div class="product-list">
		<!-- 搜索区域 -->
		<div class="search-area">
			<el-button type="primary" @click="handleAdd">新增</el-button>

			<el-form :inline="true">
				<el-form-item>
					<el-input
						v-model="searchForm.itemCode"
						placeholder="请输入商品编码"
						clearable
					/>
				</el-form-item>
				<el-form-item>
					<el-input
						v-model="searchForm.itemName"
						placeholder="请输入商品名称"
						clearable
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSearch">搜索</el-button>
					<el-button type="danger" @click="handleReset">重置</el-button>
				</el-form-item>
			</el-form>
		</div>

		<!-- 表格区域 -->
		<el-table :data="tableData" border style="width: 100%" v-loading="loading">
			<el-table-column prop="itemCode" label="商品编码" />
			<el-table-column prop="name" label="商品名称" />
			<el-table-column prop="price" label="价格" />
			<el-table-column prop="quantity" label="数量" />
			<el-table-column prop="unit" label="单位" />
			<el-table-column prop="category" label="类别" />
			<el-table-column label="操作" width="240" align="center">
				<template #default="{ row }">
					<el-button type="primary" @click="detailClick(row)">详情</el-button>
					<el-button type="primary" @click="editClick(row)">编辑</el-button>
					<el-button type="danger" @click="handleDelete(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页区域 -->
		<div class="pagination">
			<el-pagination
				v-model:current-page="page"
				v-model:page-size="pageSize"
				:total="total"
				:page-sizes="[10, 20, 50, 100]"
				layout="total, sizes, prev, pager, next"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			/>
		</div>
	</div>
</template>

<script setup>
import api from '@/request'
import { ElMessage, ElMessageBox } from 'element-plus'

let router = useRouter()

const loading = ref(false)

// 分页参数
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 搜索表单
const searchForm = reactive({
	itemCode: ''
})

// 表格数据
const tableData = ref([])
// 获取列表数据
const getList = async () => {
	try {
		loading.value = true

		let params = {
			page: page.value,
			pageSize: pageSize.value
		}

		if (searchForm.itemCode) {
			params.itemCode = searchForm.itemCode
		}

		// 这里替换为实际的API调用
		const { data } = await api.productList(params)

		localStorage.setItem('pageParams', JSON.stringify(params))
		tableData.value = data.list
		total.value = data.pagination.total
	} catch (error) {
		ElMessage.error('获取数据失败')
	} finally {
		loading.value = false
	}
}

// 搜索
const handleSearch = () => {
	page.value = 1
	getList()
}

// 重置
const handleReset = () => {
	page.value = 1
	pageSize.value = 12
	searchForm.itemCode = ''
	getList()
}

// 分页处理
const handleSizeChange = val => {
	pageSize.value = val
	getList()
}

const handleCurrentChange = val => {
	page.value = val
	getList()
}

// 新增
const handleAdd = () => {
	router.push({
		path: '/store/product/add'
	})
}

// 详情
const detailClick = row => {
	router.push({
		path: `/store/product/detail/${row.id}`
	})
}

// 编辑
const editClick = row => {
	router.push({
		path: `/store/product/edit/${row.id}`
	})
}

// 删除
const handleDelete = row => {
	ElMessageBox.confirm('确认删除该商品吗？', '提示', {
		type: 'warning'
	}).then(async () => {
		// 这里替换为实际的删除API调用
		await api.productDelete({
			id: row.id
		})
		ElMessage.success('删除成功')
		getList()
	})
}

onMounted(() => {
	let params = JSON.parse(localStorage.getItem('pageParams'))
	if (!params) {
		params = {
			page: 1,
			pageSize: 12,
			itemCode: ''
		}
	} else {
		page.value = params.page
		pageSize.value = params.pageSize
		searchForm.itemCode = params.itemCode
	}
	getList()
})
</script>

<style scoped lang="less">
.product-list {
	/* height: 100%; */
	padding: 20px;
	background-color: #f9f9f9;
}

.search-area {
	margin-bottom: 20px;
	background-color: #ffffff;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	padding: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;

	::v-deep(.el-form-item) {
		margin-bottom: 0;
	}
	::v-deep(.el-form-item:last-child) {
		margin-right: 0;
	}
}

.el-table {
	background-color: #ffffff;
	border-radius: 5px;
}

.el-table th {
	background-color: #f2f2f2;
	color: #333;
}

.pagination {
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
	color: #666;
}

.form-container {
	background-color: #f9f9f9;
	border-radius: 5px;
	padding: 20px;
}

.el-form-item {
	margin-bottom: 15px;
}

.el-input,
.el-input-number {
	border: 1px solid #dcdfe6;
	border-radius: 4px;
}

.el-input:focus,
.el-input-number:focus {
	border-color: #409eff;
	box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
}
</style>
